<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set">
        <div class="addAttendance">
            <span class="numeDuce" @click="oneCheck">
                数据导出
            </span>
            <span class="numeDuces" @click="twoCheck">
                考勤统计
            </span>
            <span id="record" @click="DataExportRecord">
                数据导出记录
            </span>
        </div>
        <div class="dataExBot">
            <div class="botOne">
                <span class="redFont">*</span> 审批类型：
                <el-select style="width:120px" size="small" v-model="tabelVal" placeholder="请选择">
                    <el-option v-for="item in optionsList" :key="item.modelId" :label="item.modelName" :value="item.modelId">
                    </el-option>
                </el-select>
                <p class="botOneP" v-show='tabelShow'>请选择审批类型</p>
            </div>
            <div class="botTwo">
                审批状态：
                <el-select style="width:120px" size="small" v-model="stateValue" placeholder="请选择">
                    <el-option v-for="item in optionState" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="botTherr">
                标题：
                <input type="text" class="headline" placeholder="请输入标题" v-model.trim="approvalTitle" maxlength="20" />
            </div>
            <div class="botFour">
                <span class="redFont">*</span>发起时间：
                <el-date-picker style="width:120px" size="small" v-model="valueOne" type="date" placeholder="开始时间" :picker-options="pickerOptions0">
                </el-date-picker>
                <div class="xian"></div>
                <el-date-picker style="width:120px" size="small" v-model="valueTwo" type="date" placeholder="结束时间" :picker-options="pickerOptions0">
                </el-date-picker>
                <p class="botFourP" v-show='valueShow'>请完成选择发起时间</p>
            </div>
            <div class="botFive">
                完成时间：
                <el-date-picker style="width:120px" size="small" v-model="finishvalueOne" type="date" placeholder="开始时间" :picker-options="pickerOptions0">
                </el-date-picker>
                <div class="xian"></div>
                <el-date-picker style="width:120px" size="small" v-model="finishvalueTwo" type="date" placeholder="结束时间" :picker-options="pickerOptions0">
                </el-date-picker>
            </div>
            <div class="inquire">
                <div class="deptDiv">
                    <div class="deptName">发起人部门：</div>
                    <div class="deptBox" @click="deptClick()">
                        <span v-show='deptList.length == 0'>请选择发起人范围</span>
                        <ul class="deptUl" v-show='deptList.length > 0'>
                            <li class="deptLi" v-for='(item,index) in deptList' :key='index'>
                                {{item.name}}
                                <!-- <div class='delectDept'>x</div> -->
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="exportButton">
                    <el-button type="primary" size="small" @click="damand()" plain>查 询</el-button>
                    <el-button type="primary" size="small" @click="exportdata" plain>导 出</el-button>
                </div>
            </div>
            <div class="dataTable">
                <div class="unData" v-show="dataList.length == 0">暂无数据</div>
                <div class="main_rightMain" v-show="dataList.length > 0">
                    <div class="noticNav">
                        <span>标题</span>
                        <span>开始时间</span>
                        <span>结束时间</span>
                        <span>审批类型</span>
                        <span>发起人部门</span>
                        <span>发起人</span>
                    </div>
                    <ul>
                        <li v-for="(item,index) in dataList" :key="index">
                            <div>
                                <div class="noticNavs">
                                    <span v-if="item.title == ''">暂无</span>
                                    <span v-else :title=item.title>{{item.title}}</span>
                                    <span>{{item.createTime | Date}}</span>
                                    <span v-if="item.finishTime == undefined">暂无</span>
                                    <span v-else>{{item.finishTime | Date}}</span>
                                    <span>{{item.state | typeFun }}</span>
                                    <span>{{item.dept | approverFun}}</span>
                                    <span>{{item.name}} </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="pagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalVal">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 选择企业至部门 -->
        <v-selectDept :updatePop="selectDeptShow" @affirm="selectDeptOkClick" @cancel="selectDeptCancelClick" :Deptselectpop="selectDeptCopyList"
            :roleMemberId='roleMemberId'></v-selectDept>
        <div class="delectFixed" v-show='loadShow'>
            <div class="delectBox">
                <div class="delectTop">
                    数据准备中，完成导出后我们会将数据保存在“数据导出记录”中，请您稍后下载即可。
                </div>
                <div class="delectFoot">
                    <el-button type="primary" @click="okClick()">我知道了</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import selectDept from "../../address/selectDept.vue";
import { mapActions } from "vuex";
export default {
  components: {
    "v-selectDept": selectDept
  },
  name: "set",
  data() {
    return {
      loadShow: false, //导出提示语
      selectDeptShow: false, // 选择企业至部门弹框
      selectDeptCopyList: [], //已选部门
      roleMemberId: sessionStorage.getItem("memberId"), //成员id
      approvalTitle: "", //标题
      tabelVal: "", //审批类型
      stateValue: "", //审批状态
      finishvalueOne: "",
      finishvalueTwo: "",
      valueShow: false, //完成时间校验
      tabelShow: false, //类型选择校验
      valueOne: "",
      valueTwo: "",
      dataList: [], //列表
      optionsList: [],
      deptList: [], //部门
      optionState: [
        { id: "", name: "全部" },
        { id: 0, name: "审批中" },
        { id: 1, name: "审批完成" },
        { id: 2, name: "已撤回" }
      ],
      totalVal: 0,
      approvaId: "",
      currentPage: 1,
      pageSize: 10,
      pickerOptions0: {
        disabledDate(time) {
          // console.log(Date.now() - 8.64e7)
          return Date.now() < time.getTime();
        }
      }
    };
  },
  created: function() {
    let self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      // 获取企业审批模型列表接口
      self
        .getmodelcompanymodellist()
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.optionsList = data.data;
              // self.tabelVal = data.data[0].modelId
            }
          } else {
            self.message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.message("服务器异常");
        });
    }
  },
  filters: {
    typeFun(val) {
      if (val == 0) {
        return "审批中";
      } else if (val == 1) {
        return "审批完成";
      } else {
        return "已撤回";
      }
    },
    Date(val) {
      if (val) {
        var now = new Date(Number(val));
        var year = now.getYear() - 100;
        var month = now.getMonth() + 1;
        month = month > 9 ? month : "0" + month;
        var date = now.getDate();
        date = date > 9 ? date : "0" + date;
        var hour = now.getHours();
        hour = hour > 9 ? hour : "0" + hour;
        var minute = now.getMinutes();
        minute = minute > 9 ? minute : "0" + minute;
        return (
          "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute
        );
      } else {
        return "暂无";
      }
    },
    approverFun(val) {
      if (!val || val == "") {
        return "暂无";
      } else {
        return val;
      }
    }
  },
  watch: {},
  methods: {
    //获取列表-获取审批数据导出列表数据接口
    getList(startTime, endTime, deptIds) {
      let self = this;
      self.dataList = [];
      self
        .getfindapprovaldatapage(
          JSON.stringify({
            companyId: sessionStorage.getItem("ORGID"),
            modelId: self.tabelVal, //审批类型编号
            state: self.stateValue, //审批状态
            title: self.approvalTitle, //标题
            startTime: startTime, //开始时间区间
            endTime: endTime, //结束时间区间
            dept: deptIds, //用户所属部门
            pageNo: self.currentPage,
            pageSize: self.pageSize
          })
        )
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data.records) {
              self.dataList = data.data.records;
            }
            self.totalVal = data.data.total * 1;
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    // 查询
    damand() {
      let self = this;
      let startTimeVal = [];
      let endTimeVal = [];
      if (this.tabelVal == "") {
        this.$message({
          type: "info",
          message: "请选择审批类型"
        });
        this.tabelShow = true;
        return;
      } else {
        this.tabelShow = false;
      }
      if (this.valueOne == "" || this.valueTwo == "") {
        this.$message({
          type: "info",
          message: "请完成选择发起时间"
        });
        this.valueShow = true;
        return;
      } else {
        this.valueShow = false;
      }
      if (this.valueOne > this.valueTwo) {
        this.$message("发起时间的开始时间不可以大于结束时间");
        return;
      } else {
        startTimeVal = [this.valueOne.getTime(), this.valueTwo.getTime()];
      }
      if (this.finishvalueOne == "" && this.finishvalueTwo != "") {
        this.$message({
          type: "info",
          message: "请完成选择完成时间"
        });
      }
      if (this.finishvalueTwo != "" && this.finishvalueOne == "") {
        this.$message({
          type: "info",
          message: "请完成选择完成时间"
        });
        return;
      }
      if (this.finishvalueTwo != "" && this.finishvalueOne != "") {
        if (this.finishvalueOne > this.finishvalueTwo) {
          this.$message("开始时间不可以大于结束时间");
          return;
        } else {
          endTimeVal = [
            this.finishvalueOne.getTime(),
            this.finishvalueTwo.getTime()
          ];
        }
      }
      let deptIdsVal = [];
      if (self.deptList.length > 0) {
        for (let i = 0; i < self.deptList.length; i++) {
          deptIdsVal.push(self.deptList[i].id);
        }
      }
      self.currentPage = Number("1");
      self.getList(startTimeVal, endTimeVal, deptIdsVal);
    },
    //  导出
    exportdata() {
      if (this.dataList.length == 0) {
        this.$message("暂无数据，无法导出");
        return;
      }
      let self = this;
      let endTimeVal = [];
      let startTimeVal = [self.valueOne.getTime(), self.valueTwo.getTime()];
      if (self.finishvalueTwo != "" && self.finishvalueOne != "") {
        endTimeVal = [
          self.finishvalueOne.getTime(),
          self.finishvalueTwo.getTime()
        ];
      }
      let deptIdsVal = [];
      if (self.deptList.length > 0) {
        for (let i = 0; i < self.deptList.length; i++) {
          deptIdsVal.push(self.deptList[i].id);
        }
      }
      self
        .getexportdata(
          JSON.stringify({
            companyId: sessionStorage.getItem("ORGID"),
            memberId: sessionStorage.getItem("memberId"),
            modelId: self.tabelVal, //审批类型编号
            state: self.stateValue, //审批状态
            title: self.approvalTitle, //标题
            startTime: startTimeVal, //开始时间区间
            endTime: endTimeVal, //结束时间区间
            dept: deptIdsVal, //用户所属部门
            pageNo: self.currentPage,
            pageSize: self.pageSize
          })
        )
        .then(data => {
          if (data.statusCode == 200) {
            self.loadShow = true;
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    //我知道了
    okClick() {
      this.loadShow = false;
    },
    //数据导出
    oneCheck() {
      this.$router.push({
        path: "/home/examine/dataExport"
      });
    },

    //考勤统计
    twoCheck() {
      this.$router.push({
        path: "/home/examine/statistics"
      });
    },
    //数据导出记录
    DataExportRecord() {
      this.$router.push({
        path: "/home/examine/dataExportRecord"
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let self = this;
      let endTimeVal = [];
      let startTimeVal = [self.valueOne.getTime(), self.valueTwo.getTime()];
      if (self.finishvalueTwo != "" && self.finishvalueOne != "") {
        endTimeVal = [
          self.finishvalueOne.getTime(),
          self.finishvalueTwo.getTime()
        ];
      }
      let deptIdsVal = [];
      if (self.deptList.length > 0) {
        for (let i = 0; i < self.deptList.length; i++) {
          deptIdsVal.push(self.deptList[i].id);
        }
      }
      self.pageSize = val;
      self.getList(startTimeVal, endTimeVal, deptIdsVal);
    },
    handleCurrentChange(val) {
      let self = this;
      let endTimeVal = [];
      let startTimeVal = [self.valueOne.getTime(), self.valueTwo.getTime()];
      if (self.finishvalueTwo != "" && self.finishvalueOne != "") {
        endTimeVal = [
          self.finishvalueOne.getTime(),
          self.finishvalueTwo.getTime()
        ];
      }
      let deptIdsVal = [];
      if (self.deptList.length > 0) {
        for (let i = 0; i < self.deptList.length; i++) {
          deptIdsVal.push(self.deptList[i].id);
        }
      }
      if (self.deptList.length > 0) {
        for (let i = 0; i < self.deptList.length; i++) {
          deptIdsVal.push(self.deptList[i].id);
        }
      }
      self.currentPage = val;
      self.getList(startTimeVal, endTimeVal, deptIdsVal);
    },
    //选择部门
    deptClick() {
      this.selectDeptShow = true;
      this.selectDeptCopyList = this.deptList;
    },
    //部门选择确认
    selectDeptOkClick(obj) {
      let self = this;
      self.selectDeptShow = false;
      console.log(obj);
      this.deptList = obj;
    },
    //取消部门选择弹框
    selectDeptCancelClick() {
      this.selectDeptShow = false;
    },

    ...mapActions([
      "getmodelcompanymodellist",
      "getfindapprovaldatapage",
      "getexportdata"
    ])
  }
};
</script>
<style scoped>
.set {
  width: 100%;
  height: 100%;
  margin-bottom: 70px;
}

.hint {
  width: 100%;
  height: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 24px;
  line-height: 44px;
  color: #303030;
  font-size: 16px;
}

.detailsTwo {
  padding-left: 56px;
  padding-top: 8px;
  color: #303030;
  font-size: 14px;
}

#record {
  cursor: pointer;
  padding-left: 10px;
}

.inquire {
  display: flex;
  height: 32px;
  width: 100%;
  margin-top: 26px;
}

.deptDiv {
  display: flex;
  height: 32px;
  width: 420px;
  margin-left: 20px;
}

.deptName {
  width: 85px;
  height: 32px;
  line-height: 32px;
}

.deptBox {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  padding: 0 4px;
  width: 200px;
  cursor: pointer;
}

.deptBox span {
  color: #dcdfe6;
}

.deptUl {
  width: 200px;
  height: 30px;
  display: flex;
  flex-flow: wrap;
  overflow-y: scroll;
  overflow-x: hidden;
}

.deptLi {
  height: 22px;
  line-height: 22px;
  padding: 0 2px;
  position: relative;
  margin: 3px;
  min-width: 10px;
  border: 1px solid #38adff;
  border-radius: 2px;
}

.delectDept {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #38adff;
  top: -6px;
  right: -6px;
  color: white;
  line-height: 10px;
  text-align: center;
  font-size: 12px;
}

.exportButton {
  margin-left: 160px;
}

.exportButton button {
  margin-right: 50px;
}

.xian {
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: #38adff;
  margin-bottom: 5px;
}

.botOne {
  display: inline-block;
  margin-left: 22px;
  margin-top: 10px;
  position: relative;
}

.botOneP {
  color: #38adff;
  position: absolute;
  left: 85px;
  bottom: -22px;
}

.el-select {
  width: 125px !important;
}

.botTwo {
  display: inline-block;
  margin-left: 15px;
}

.botTherr {
  display: inline-block;
  margin-left: 60px;
}

.botFour {
  display: inline-block;
  margin-left: 20px;
  margin-top: 26px;
  position: relative;
}

.botFourP {
  position: absolute;
  color: #38adff;
  bottom: -22px;
  left: 85px;
}

.botFive {
  display: inline-block;
  margin-left: 48px;
  margin-top: 26px;
}

.headline {
  width: 220px;
  height: 30px;
  border: 1px solid #dcdfe6;
  padding-left: 12px;
  border-radius: 4px;
}

.set .el-input {
  width: 150px;
}

.addAttendance {
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
  color: #303030;
  font-size: 14px;
}

.numeDuce {
  color: #38adff;
  border-radius: 4px;
  padding: 5px 15px;
  cursor: pointer;
}

.numeDuces {
  border-radius: 4px;
  padding: 5px 15px;
  cursor: pointer;
}

.dataExBot {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.dataTable {
  text-align: center;
  width: 100%;
  height: auto;
  margin-top: 70px;
}

.addTitle {
  float: right;
  margin-top: -40px;
  margin-right: 30px;
  cursor: pointer;
  width: 70px;
  height: 30px;
  background-color: #38adff;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
}

.pagination {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
}

.main_rightTop p:nth-child(1) {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 14px;
  width: 90%;
}

.noticNav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #f4f4f6;
  margin-top: 20px;
}

.noticNavs {
  width: 100%;
  height: 48px;
  line-height: 48px;
}

.noticNavs span:nth-child(2) p {
  width: 16%;
  height: 40px;
  float: left;
}

.noticNavs span:nth-child(6) p img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.noticNavs span:nth-child(1) {
  width: 17%;
  text-align: center;
  padding-left: 17px;
}

.noticNavs span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  width: 16%;
  text-align: center;
}

.noticNav span:nth-child(1) {
  width: 16%;
  text-align: center;
  padding-left: 24px;
}

.noticNav span {
  float: left;
  width: 16%;
  text-align: center;
}

ul li {
  height: 48px;
  border-bottom: 1px solid #d9d9d9;
}

ul li > p {
  height: 48px;
  line-height: 48px;
  margin-left: 24px;
  cursor: pointer;
}

.biaoti {
  float: left;
}

.unread {
  float: left;
  margin-left: 189px;
}

.grayfont {
  color: #8f8e94;
}

.borderStyle {
  cursor: pointer;
  font-size: 12px;
  color: #fcb298;
  width: 48px;
  display: inline-block;
  border: 1px solid #fcb298;
  height: 20px;
  line-height: 20px;
  border-radius: 17px;
  text-align: center;
}

.unData {
  color: #303030;
  font-size: 20px;
  padding-top: 20px;
}

.redFont {
  color: red;
}

.delectFixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 10000000000;
}

.delectBox {
  width: 400px;
  height: 200px;
  background: white;
  margin: 300px auto;
  border-radius: 4px;
  animation: madalsBox 0.8s;
  overflow: hidden;
}

@keyframes madalsBox {
  from {
    transform: translateY(-200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.delectTop {
  width: 340px;
  height: 70px;
  line-height: 24px;
  font-size: 16px;
  text-align: center;
  margin-top: 50px;
  margin: 50px auto 0;
}

.delectFoot {
  width: 125px;
  height: 50px;
  margin-left: 245px;
}

.delectFoot > button {
  margin: 0 12px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #dcdfe6;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #dcdfe6;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #dcdfe6;
}
:-moz-placeholder { /* Firefox 18- */
  color: #dcdfe6;
}
</style>